<template>
  <div class="games">
    <!-- <div class="kinds-line"></div>
    <div class="sort-wrap">
      <div class="time" @click='sortGame(1)'>
        <span>比赛时间</span>
        <div :class='{ordered: this.order === 1}'><i class="iconfont icon-xiangxia"></i></div>
      </div>
      <div class="award" @click='sortGame(3)'>
        <span>奖励</span>
        <span :class='{ordered: this.order === 3}'><i class="iconfont icon-xiangxia"></i></span>
      </div>
      <div class="players" @click='sortGame(2)'>
        <span>参赛人数</span>
        <span :class='{ordered: this.order === 2}'><i class="iconfont icon-xiangxia"></i></span>
      </div>
    </div> -->
    <div class="filter-wrap">
      <div class="doing" @click.stop='filterGame(3)'>
        <i class="iconfont" :class="reqParams.gameStep === 3?'icon-checkbox2':'icon-checkbox'"></i>
        <span>进行中</span>
      </div>
      <div class="nostart" @click.stop='filterGame(0)'>
        <i class="iconfont" :class="reqParams.gameStep === 0?'icon-checkbox2':'icon-checkbox'"></i>
        <span>未开始</span>
      </div>
      <div class="end" @click.stop='filterGame(4)'>
        <i class="iconfont" :class="reqParams.gameStep === 4?'icon-checkbox2':'icon-checkbox'"></i>
        <span>已结束</span>
      </div>
      <div class="filter-tab">
        <div :class="{checked: reqParams.isPwd == 0}" @click.stop='checkGame(0)'>公开赛</div>
        <div :class="{checked: reqParams.isPwd == 1}" @click.stop='checkGame(1)'>邀请赛</div>
      </div>
    </div>
    <div class="sort-wrap">
      <div class="time" @click='sortGame(1)'>
        <span>按比赛时间</span>
        <div :class='{"order-up": upDate,"order-blue":(reqParams.order == 1 || reqParams.order == -1)}'><i
          class="iconfont icon-xiangxia"></i></div>
      </div>
      <div class="players" @click='sortGame(2)'>
        <span>按参赛人数</span>
        <span :class='{"order-up": upPlayers,"order-blue":(reqParams.order == 2 || reqParams.order == -2)}'><i
          class="iconfont icon-xiangxia"></i></span>
      </div>
      <div class="award" @click='sortGame(3)'>
        <span>按奖励数量</span>
        <span :class='{"order-up": upAward,"order-blue":(reqParams.order == 3 || reqParams.order == -3)}'><i
          class="iconfont icon-xiangxia"></i></span>
      </div>
    </div>
    <load-more :top-method='refresh' :bottom-method='loadMoreData' ref='loadMore'>
      <div class="list">
        <div v-for='game in games' :key='game.GAME_ID' v-if='game.GAME_STEP != "5"' @click='gotoDetail(game)'>
          <div v-if='isOldGame(game)'>
            <game-item :game='game'></game-item>
            <div class="divide"></div>
          </div>
          <game-item-v2 :game='game' v-else></game-item-v2>
        </div>
      </div>
      <div v-if='requestError' @click='resetGames()' class="requestError">出错啦~点击重试</div>
    </load-more>
  </div>
</template>

<style lang='less' rel="stylesheet/less" scoped>
.games{
  padding-bottom: 44px;
  background: #fff;
  .filter-wrap {
    display: flex;
    text-align: center;
    color: #999;
    font-size: 12px;
    border-top: 1px solid #E7E7E7;
    height: 38px;
    margin-top: 8px;
    padding-left: 7.666%;
    align-items: center;
    .doing, .nostart, .end {
      margin-right: 3%;
      i {
        font-size: 17px;
        color: #2691f9;
        position: relative;
        top: 2px;
      }
    }
    .filter-tab {
      display: flex;
      width: 30%;
      height: 23px;
      color: #fff;
      border-radius: 11.5px;
      margin-left: 3%;
      div {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        background: #565656;
      }
      div:nth-child(1) {
        border-top-left-radius: 11.5px;
        border-bottom-left-radius: 11.5px;
      }
      div:nth-child(2) {
        border-top-right-radius: 11.5px;
        border-bottom-right-radius: 11.5px;
      }
      .checked {
        background: #2FAFEC !important;
      }
    }
  }
  .sort-wrap {
    display: flex;
    text-align: center;
    color: #999;
    font-size: 12px;
    border-top: 1px solid #E7E7E7;
    height: 39px;
    box-shadow: 0 19px 19px 0 rgba(231, 231, 231, 0.7);
    align-items: center;
    justify-content: space-between;
    padding: 0 7.666%;
    .time, .award, .players {
      display: flex;
      align-items: center;
      justify-content: center;
      /*flex:1;*/
    }
    .order-up {
      transform: rotate(180deg);
    }
    .order-blue {
      color: #2FAEFC;
    }
  }
  .kinds-line{
    width: 100%;
    height: 1pt;
    background-color: #A2E1FC;
  }
  .sort-wrap{
    display: flex;
    text-align: center;
    color: #999;
    font-size: 1.3rem;
    box-shadow: 0 19px 19px 0 rgba(231, 231, 231, 0.7);
    .time,.award,.players{
      flex:1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 0;
    }
    .ordered{
      transform: rotate(180deg);
      color: #78D4FF;
    }
  }
  .pageNum{
    position: fixed;
    bottom: 150px;
    color: red;
    font-size: 30px;
  }
  .divide{
    border-bottom: dashed 1px #a1a1a1;
    margin: 0 8%;
  }
  .requestError{
    text-align: center;
    padding: 5px;
  }
}

</style>

<script>
  import GameItem from 'components/game/gamelist/GameItem'
  import GameItemV2 from 'components/game/gamelist/GameItemV2'
  import RemoteDAO from 'common/remoteDAO'
  import LoadMore from 'components/LoadMore'
  import {openGame} from 'components/game/openGame'
  export default {
    components:{GameItem, GameItemV2, LoadMore},
    data(){
      return {
        games:[],
        reqParams: {
          gameStatus: '1',//审核通过的
          pageSize: 20,
          pageNum: 1,
          gameStep: 3, // 3 进行中 0未开始 4已结束
          isPwd: 0,
          order: -1 //1:开始时间正序 2:加入人数正序 3:资金池正序 (取负值时为逆序)
        },
        requestError: false,
        gameOrdered:{
          date: false,//game date ordered
          award: false,
          players: false
        },
        upDate: false, //时间排序箭头是否向上
        upPlayers: false, //人数排序箭头是否向上
        upAward: false, // 奖励排序箭头是否向上
      }
    },
    mounted () {
      var filters = this.$store.state.personalpkFilters
      if (filters){
        this.reqParams.order = filters.order
        this.reqParams.gameStep = filters.gameStep
        this.reqParams.isPwd = filters.isPwd
        this.upDate = filters.upDate
        this.upPlayers = filters.upPlayers
        this.upAward = filters.upAward
      }
    },
    updated () {
      let filters = {
        order: this.reqParams.order,
        gameStep:this.reqParams.gameStep,
        isPwd:this.reqParams.isPwd,
        upDate: this.upDate,
        upPlayers: this.upPlayers,
        upAward: this.upAward
      }
      this.$store.dispatch('setPersonalPKFilters',filters)
    },
    methods:{
      checkGame (type) {
        this.reqParams.isPwd = type
        this.resetGames()
      },
      filterGame (gameStep) {
        this.reqParams.gameStep = gameStep
        this.resetGames()
      },
      isOldGame (game) {
        if (game.JOIN_BEGIN_DATE === '' || game.JOIN_BEGIN_DATE === '0' || !game.JOIN_BEGIN_DATE) return false
        return true
      },
      refresh () {
        this.getGamesP(true);
      },
      loadMoreData () {
        this.getGamesP(false);
      },
      /**
       * 跳转到比赛详情
       * @param  {Object} game 比赛
       */
      gotoDetail (game) {
        // this.$router.push({path: '/game/gamedetail',query:{gameId:gameId}});
          // this.$store.dispatch('setTip',{text:game.END_DATE + '   END_DATE'});
        openGame(game, this);
      },
      resetGames () {
        this.requestError = false;
        this.reqParams.pageNum = 1
        this.games = []
        this.$refs.loadMore.reset();
      },
      /**
       * 给比赛排序
       * @param  {number} type 排序的种类
       */
      sortGame (type) {
        switch (type) {
          case 1://game start date
            if (Math.abs(this.reqParams.order) === 1) {
              this.reqParams.order = -this.reqParams.order
              this.upDate = !this.upDate
            } else {
              if (this.upDate) {
                this.reqParams.order = 1
              } else {
                this.reqParams.order = -1
              }
            }
            break;
          case 2://players
            if (Math.abs(this.reqParams.order) === 2) {
              this.reqParams.order = -this.reqParams.order
              this.upPlayers = !this.upPlayers
            } else {
              if (this.upPlayers) {
                this.reqParams.order = 2
              } else {
                this.reqParams.order = -2
              }
            }
            break;
          case 3://award
            if (Math.abs(this.reqParams.order) === 3) {
              this.reqParams.order = -this.reqParams.order
              this.upAward = !this.upAward
            } else {
              if (this.upAward) {
                this.reqParams.order = 3
              } else {
                this.reqParams.order = -3
              }
            }
            break;
        }
        this.resetGames()
      },
      /**
       * 获取个人PK比赛列表
       * @param  {[boolean]} refresh [是否刷新]
       */
      getGamesP (refresh) {
        // body...
        if (refresh) {
          this.reqParams.pageNum = 1
          this.$refs.loadMore.reset()
          this.games = []
        }
        let param = {
          userCode: '0',
          gameId: '',
          gameStatus: this.reqParams.gameStatus,
          gameStep: this.reqParams.gameStep.toString(),
          isPwd: this.reqParams.isPwd.toString(),
          gameKind: '',
          gameType: 'NETDS',
          pageSize: this.reqParams.pageSize,
          pageNum: this.reqParams.pageNum,
          order: this.reqParams.order
        }
        RemoteDAO.callUC12008302(param, response =>{
          if(response.error == '1'){
            this.$store.dispatch('setTip', {text: response.data});
            if(this.games.length == 0) this.requestError = true;//仅当games列表中没有比赛时才显示这个错误
            this.$refs.loadMore.onBottomError();
            return;
          }else {//request success
            this.requestError = false;
            if(response.data == undefined || response.data == null || response.data.body.length === 0) {//数据加载完
              if(this.games.length == 0){//请求返回的数据为空，并且games列表中的数据也为空
                this.requestError = true;
                this.$refs.loadMore.onBottomError();
              }else{
                // this.games = this.games.concat(response.data.body);
                this.$refs.loadMore.onBottomAllLoaded();
              }
            }else{//get games
              if (refresh) {
                this.games = response.data.body.filter(item => {
                  return item.GAME_STATUS === '1'
                });
                this.$refs.loadMore.onTopLoaded();
              }else {
                this.games = this.games.concat(response.data.body.filter(item => {
                  return item.GAME_STATUS === '1'
                }));
                this.$refs.loadMore.onBottomLoaded();
              }
            }
            this.reqParams.pageNum += 1;
          }
        });
      }
    }
  }
</script>
